<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"/>
        <span>筛选搜索</span>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="queryInfo" size="small" label-width="140px">
          <el-form-item label="人脉圈标题：">
            <el-input style="width: 300px" v-model="queryInfo.title" placeholder="请输入人脉圈标题"></el-input>
          </el-form-item>
          <el-form-item label="人脉圈类型：">
            <el-select style="width: 300px" v-model="queryInfo.type" placeholder="请选择人脉圈类型">
              <el-option
                v-for="item in networkTypes"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-button
            style="float: right"
            type="primary"
            size="medium"
            icon="el-icon-search"
            @click="getDataList()"
          >
            搜索
          </el-button>
          <el-button
            style="float: right;margin-right: 15px"
            size="medium"
            @click="handleResetSearch()"
          >
            重置
          </el-button>
        </el-form>

      </div>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"/>
      <span>人脉圈列表</span>
    </el-card>
    <div class="table-container">
      <el-table
        ref="tableList"
        v-loading="listLoading"
        :data="datalist"
        border
        stripe>
        <el-table-column type="index" width="60" align="center"/>
        <el-table-column label="标题" align="center">
          <template slot-scope="scope">{{ scope.row.title }}</template>
        </el-table-column>
        <el-table-column label="类型" width="" align="center">
          <template slot-scope="scope">{{ scope.row.type }}</template>
        </el-table-column>
        <el-table-column label="话题" align="center">
          <template slot-scope="scope">{{ scope.row.topic }}</template>
        </el-table-column>
        <el-table-column label="操作" width="250" align="center">
          <template slot-scope="scope">
            <p>
              <el-button
                size="mini"
                type="warning"
                @click="showDialog(scope.row.id)"> 查看成员
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="removeDataById(scope.row.id)"> 退出
              </el-button>
            </p>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="queryInfo.pageSize"
        :page-sizes="[5,10,15]"
        :current-page.sync="queryInfo.pageNum"
        :total="queryInfo.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 对话框 -->
    <el-dialog title="成员列表" :visible.sync="dialogVisible" width="50%" @close="dialogClosed">
      <!-- 内容主体 -->
      <el-row :gutter="24" style="height: 400px; overflow:auto ;">
        <el-col :span="8" style="padding-bottom: 12px;" v-for="user in userList" :key="user.id">
          <el-card>
            <el-tooltip class="item" effect="dark" content="管理员" placement="top" :disabled="user.isAdmin === 0">
              <el-row type="flex" justify="start">
                <el-col :span="10">
                  <el-avatar size="medium" :src="user.avatar"></el-avatar>
                </el-col>
                <el-col :span="14">
                  <div v-if="user.isAdmin === 0" class="text-nickName">{{ user.nickName }}</div>
                  <div v-else class="text-nickName-admin">{{ user.nickName }}</div>
                  <div class="text-brief">{{ user.signature }}</div>
                </el-col>
              </el-row>
            </el-tooltip>
          </el-card>

        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {deleteNetworkUser, getNetworkTypes, getUsersOfNetwork, listNetwork} from '@/api/network'
import {mapGetters} from "vuex";

export default {
  computed: {
    ...mapGetters([
      'name',
      'id',
      'user'
    ])
  },
  data() {
    return {
      // 人脉圈类型列表
      networkTypes: [],
      // 获取用户列表查询参数对象
      queryInfo: {
        userId: '',
        title: '',
        type: '',
        // 当前页数
        pageNum: 1,
        // 每页显示多少数据
        pageSize: 5,
        total: 0
      },
      datalist: [],
      userList: [],
      listLoading: false,
      // 对话框
      dialogVisible: false
    }
  },
  created() {
    this.getDataList()
    this.getNetworkTypes()
  },
  methods: {
    // 表格分页数据
    getDataList() {
      this.listLoading = true
      // 传入当前登录用户id
      this.queryInfo.userId = this.user.id
      const params = this.queryInfo
      listNetwork(params).then(response => {
        this.datalist = response.data.records
        this.queryInfo.pageNum = response.data.current
        this.queryInfo.pageSize = response.data.size
        this.queryInfo.total = response.data.total
        this.listLoading = false
        this.listLoading = false
      })
      //   .catch(() => {
      //   this.datalist = [{
      //     id: 1,
      //     userId: 1,
      //     title: 'Java好友圈',
      //     type: '好友圈',
      //     topic: 'Java',
      //     visible: 1,
      //     status: 1,
      //   }, {
      //     id: 2,
      //     userId: 1,
      //     title: 'Python好友圈 ',
      //     type: '交流圈',
      //     topic: 'Python',
      //     visible: 1,
      //     status: 1,
      //   }]
      //   this.listLoading = false
      // })
    },
    // * 搜索人脉圈类型下选框
    getNetworkTypes() {
      getNetworkTypes().then(res => {
        this.networkTypes = res.data;
      })
    },
    // 重置
    handleResetSearch() {
      this.queryInfo = {
        pageNum: 1,
        pageSize: 5
      }
    },
    // 显示对话框, 请求当前人脉圈所有成员信息
    showDialog(id) {
      getUsersOfNetwork(id).then(res => {
        this.userList = res.data
        this.dialogVisible = true
      }).catch(res => {
        this.$message.warning('人脉圈无成员')
      })
    },
    // TODO 退出人脉圈 传参问题
    async removeDataById(networkId) {
      const confirmResult = await this.$confirm(
        '此操作将退出人脉圈, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      // 点击确定 返回值为：confirm
      // 点击取消 返回值为： cancel
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      // 传入当前用户id
      const param = {'userId': this.user.id, 'networkId': networkId}
      deleteNetworkUser(param).then(response => {
        if (response.retCode !== 200) return this.$message.error('退出后人脉圈失败！')
        this.$message.success('退出后人脉圈成功！')
        this.getDataList()
      })
    },
    // * 监听 pagesize改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize
      this.getDataList()
    },
    // * 监听 页码值 改变事件
    handleCurrentChange(newSize) {
      this.queryInfo.pageNum = newSize
      this.getDataList()
    },
    dialogClosed() {
      this.dialogVisible = false
      this.userList = []
    }
  }
}
</script>

<style lang="scss" scoped>
.el-col el-col-6 {
  padding-bottom: 12px;
}

.el-upload__tip {
  line-height: 1.2;
}

.text-nickName-admin {
  color: hotpink;
}
</style>
